<div class="page page-table listar-maquinas-ejercicios">

    <div class="row ui-section" data-ng-controller="listarMaquinasCtrl" ng-init="listarMaquinas()">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header" data-translate="MACHINE_MAINTENANCE"></h2>
        </div>
        <div class="col-md-12">
            <section class="panel panel-default table-dynamic">
                <div class="table-filters">
                    <div class="row">
                        <div class="col-sm-4 col-xs-6">
                            <form>
                                <input type="text"
                                       placeholder="Búsqueda..."
                                       class="form-control"
                                       data-ng-model="searchKeywords"
                                       data-ng-keyup="search()">
                            </form>
                        </div>
                        <div class="col-sm-3 col-xs-6 filter-result-info">
                            <span>
                                Mostrando {{filteredStores.length}}/{{listOfItems.length}} entradas
                            </span>
                        </div>
                        <div class="col-sm-5 text-right add-new-cta-padding">
                            <md-button href="#/maquinas/registrar"  class="md-primary"><span data-translate="GENERIC_FORM_CTA_ADD"></span></md-button>
                        </div>
                    </div>
                </div>

                <table class="table table-bordered table-striped table-responsive">
                    <thead>
                        <tr>
                            <th><div class="th">
                                Nombre
                                    <span class="fa fa-angle-up"
                                          data-ng-click=" order('NombreMaquina') "
                                          data-ng-class="{active: row == 'NombreMaquina'}"></span>
                                    <span class="fa fa-angle-down"
                                          data-ng-click=" order('-NombreMaquina') "
                                          data-ng-class="{active: row == '-NombreMaquina'}"></span>
                            </div></th>
                            <th><div class="th">
                                N&uacute;mero serie
                                    <span class="fa fa-angle-up"
                                          data-ng-click=" order('NumeroSerie') "
                                          data-ng-class="{active: row == 'NumeroSerie'}"></span>
                                    <span class="fa fa-angle-down"
                                          data-ng-click=" order('-NumeroSerie') "
                                          data-ng-class="{active: row == '-NumeroSerie'}"></span>
                            </div></th>
                            <th><div class="th">
                                N&uacute;mero m&aacute;quina
                                    <span class="fa fa-angle-up"
                                          data-ng-click=" order('NumeroMaquina') "
                                          data-ng-class="{active: row == 'NumeroMaquina'}"></span>
                                    <span class="fa fa-angle-down"
                                          data-ng-click=" order('-NumeroMaquina') "
                                          data-ng-class="{active: row == '-NumeroMaquina'}"></span>
                            </div></th>
                             <th><div class="th">
                                Im&aacute;gen
                                    <span class="fa fa-angle-up"
                                          data-ng-click=" order('Imagen') "
                                          data-ng-class="{active: row == 'Imagen'}"></span>
                                    <span class="fa fa-angle-down"
                                          data-ng-click=" order('-Imagen') "
                                          data-ng-class="{active: row == '-Imagen'}"></span>
                            </div></th>
                           <th><div class="th">
                                Indicaciones de uso
                                    <span class="fa fa-angle-up"
                                          data-ng-click=" order('IndicacionesUso') "
                                          data-ng-class="{active: row == 'IndicacionesUso'}"></span>
                                    <span class="fa fa-angle-down"
                                          data-ng-click=" order('-IndicacionesUso') "
                                          data-ng-class="{active: row == '-IndicacionesUso'}"></span>
                            </div></th>
                            <th><div class="th">
                                Tipo de M&aacute;quina
                                    <span class="fa fa-angle-up"
                                          data-ng-click=" order('IdTipoMaquina') "
                                          data-ng-class="{active: row == 'IdTipoMaquina'}"></span>
                                    <span class="fa fa-angle-down"
                                          data-ng-click=" order('-IdTipoMaquina') "
                                          data-ng-class="{active: row == '-IdTipoMaquina'}"></span>
                            </div></th>
                            <th class="actions-column"><div class="th">
                                <span data-translate="GENERIC_LIST_TABLE_TH_ACTIONS"></span>
                            </div></th>
                        </tr>
                    </thead>
                    <tbody>
                    <tr data-ng-repeat="item in currentPageItems">
                        <td>{{item.NombreMaquina}}</td>
                        <td>{{item.NumeroSerie}}</td>
                        <td>{{item.NumeroMaquina}}</td>
                        <td><a href="" ng-click="imagePreview(this)" data-toggle="modal" data-target="#imagePreview"><img class="image-responsive img-maquinas" ng-src="data:image/jpeg;base64, {{item.ImagenBase64}}"/></a></td>
                        <td>{{item.IndicacionesUso}}</td>
                        <td>{{item.IdTipoMaquina}}</td>
                        <td>
                            <md-button href="#/maquinas/editar/{{item.Id}}" aria-label="Editar" class="md-icon-button"><span class="imd imd-mode-edit"></span></md-button><span class="space"></span>
                            <md-button data-ng-click="eliminar(item.Id)" aria-label="Eliminar" class="md-icon-button"><span class="imd imd-delete"></span></md-button>
                        </td>
                    </tr>
                    </tbody>
                </table>

                <!-- Modal -->
                <div class="modal fade" id="imagePreview" tabindex="-1" role="dialog" aria-labelledby="imagePreview" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      </div>
                      <div class="modal-body">
                       <img ng-src="{{previewImage}}" />
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                      </div>
                    </div>
                  </div>
                </div>

                <footer class="table-footer">
                    <div class="row">
                        <div class="col-md-6 page-num-info">
                            <span>
                                Mostrar
                                <select data-ng-model="numPerPage"
                                        data-ng-options="num for num in numPerPageOpt"
                                        data-ng-change="onNumPerPageChange()">
                                </select>
                                entradas por página
                            </span>
                        </div>
                        <div class="col-md-6 text-right pagination-container">
                            <pagination class="pagination-sm"
                                        ng-model="currentPage"
                                        total-items="filteredStores.length"
                                        max-size="4"
                                        ng-change="select(currentPage)"
                                        items-per-page="numPerPage"
                                        rotate="false"
                                        previous-text="&lsaquo;" next-text="&rsaquo;"
                                        boundary-links="true"></pagination>
                        </div>
                    </div>
                </footer>
            </section>
        </div>
    </div>

</div>